<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">

    <p>{{ title }}</p>

    <form action="">
        <div>
            用户名: <input type="text" name="username" id="" v-model="username">
        </div>
        <div>
            密码：<input type="password" name="pwd" id="" v-model="password">
        </div>
    </form>

    <div>
        用户输入的用户名：<h2>{{ username }}</h2> 和密码是：<h2>{{ password }}</h2>
    </div>

</div>

</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    console.log(Vue);

    var vm = new Vue({
        el: '#app',
        data: {
            // 通过 vue管理的区域里面的 v-model 可以接收到用户的输入，然后放置到 vuejs对象的 $data的 username 和 password 属性里面。
            username: '',
            password: '',


            title: 'hi vuejs!',

        },
    });

    console.log(vm);


</script>

</html>
